<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
      
        .box{
            transform: perspective(500px);
            transform-style: preserve-3d;
            position:relative;
            
        }
        /* 给当前的要旋转的图像的上一层添加就可以了 */
        .item{
            position: absolute;
            left:200px;
            width: 50px;
            height:210px;
            background-size: cover;
            background-image: url(./img/01.jpg);
            background-repeat: no-repeat;
           
            transform:rotateY(90deg);
        }
        .front{
            position: absolute;
            left:250px;
            width: 200px;
            height:200px;
            background-size: cover;
            background-image: url(./img/01.jpg);
            background-repeat: no-repeat;
            /* transform:rotateY(90deg); */
        }
        .test{
            width:200px;
            height:200px;
             
            transform:perspective(500px) translate(-50%,-50%);
            
            
            background-color: aqua;
             
            transform:rotateY(45deg);
        }
        .shell{
            /* 这个是相对于之前的位置进行的偏移 */
            position: absolute;
            width:300px;
            height:300px;   
            flex: content;
            justify-content: center;
            align-items: center;
            border-width: 20px;
            border-color: blue;
            border-style:solid;
            transform-style: preserve-3d;
            transform:perspective(500px);
        }

        .a{
            width:200px;
            height:200px;
            border-width: 20px;
            border-color: aquamarine;
            border-style:solid;
            /* background-color: red; */
        }
    </style>
</head>
<body>
    <!-- <div class="box">
        <div class="item"></div>
        <div class="front"></div>
    </div> -->

    <div class="shell"><div class="test"></div></div>


    <!-- <div class="a"></div> -->
</body>
</html>